import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ListView,
  TextInput,
  Text,
  TouchableOpacity
} from 'react-native'
import {Icon} from '../common/icon'

class SearchInput extends Component {
  constructor(props) {
    super(props)

    this.state = {
      searchValue: ''
    }
  }
  render() {
    return (
      <View style={styles.searchInputView}>
        <Icon name='search_icon' size={20} color="#BDBDBD" style={styles.searchIcon} />
        <TextInput
          style={styles.searchInput}
          onChangeText={(searchValue) => this.setState({searchValue})}
          value={this.state.searchValue}
          underlineColorAndroid="transparent"
          placeholder={this.props.placeholder}
          placeholderTextColor="#888888"
        />
      </View>
    )
  }
}

export default SearchInput

const styles = StyleSheet.create({
  searchInputView: {
    flexDirection: 'row',
    borderColor: "#f1f1f1",
    borderWidth: 1,
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  searchInput: {
    flex: 1,
    height: 44,
    borderColor: 'transparent',
    borderWidth: 1,
    padding: 0,
    paddingLeft: 13,
    paddingRight: 13,
    color: '#888888',
    fontSize: 14,
  },
  searchIcon: {
    marginLeft: 10,
  }
})
